<template>
<div class="app-container">
    <div class="filter-container">
        <div class="filter-left">
            <el-form :inline="true" :model="ruleForm" @submit.native.prevent>
                <el-form-item>
                    <el-col :span="11">
                        <el-select v-model="ruleForm.province_id" @change="changeProvice" filterable placeholder="请选择省/直辖市">
                            <el-option v-for="(item, index) in provinceList" :key="index" :label="item.shortname" :value="item.id"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="2" style="text-align: center">-</el-col>
                    <el-col :span="11">
                        <el-select v-model="ruleForm.city_id" placeholder="请选择城市">
                            <el-option v-for="(item, index) in cityList" :key="index" :label="item.shortname" :value="item.id"></el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="confirmOpen">确认开放</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="filter-right">
            <el-switch v-model="isExpand" active-text="全部展开" inactive-text="关闭所有行" @change="changeExpand">
            </el-switch>
        </div>
    </div>
    <el-table ref="mainTable" :data="tableData" element-loading-text="Loading" border fit :default-expand-all="isExpand" :expand-row-keys="expandRows" :row-key="getRowKeys" highlight-current-row :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column label="区域" prop="shortname">
            <template slot-scope="scope">
                {{ scope.row.shortname }}
            </template>
        </el-table-column>
        <el-table-column label="排序" prop="sort"></el-table-column>
        <el-table-column label="操作" align="center" width="300px">
            <template slot-scope="scope">
                <template v-if="scope.row.level < 3">
                    <el-button type="primary" size="mini" @click="showEditRegin(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="closeCity(scope.row)">关闭</el-button>
                </template>
            </template>
        </el-table-column>
    </el-table>

    <edit-view ref="editRegionView" @getTableData="getTableList"></edit-view>
</div>
</template>

<script>
import {
    getRegionTreeApi,
    getProvinceListApi,
    getChildrenApi,
    openCityApi,
    closeCityApi,
} from "@/api/system/dictionary/region";

import editView from "./edit";

export default {
    components: {
        editView,
    },
    data() {
        return {
            ruleForm: {
                province_id: "",
                city_id: "",
            },
            isExpand: false,
            expandRows: [],
            tableData: [{
                id: 1,
                shortname: "北京",
                srot: 99,
            }, ],
            provinceList: [],
            cityList: [],
        };
    },
    created() {
        // 获取列表
        this.getProvinceList();
        this.getTableList();
    },
    methods: {
        // 获取列表信息
        getTableList() {
            getRegionTreeApi({}).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.tree;
                } else {
                    this.$message.warning(res.msg);
                }
            });
        },
        getProvinceList() {
            getProvinceListApi({}).then((res) => {
                if (res.code == 200) {
                    this.provinceList = res.data.list;
                } else {
                    this.$message.warning(res.msg);
                }
            });
        },
        changeProvice() {
            let id = this.ruleForm.province_id;

            getChildrenApi({
                id: id,
            }).then((res) => {
                if (res.code == 200) {
                    this.ruleForm.city_id = "";
                    this.cityList = res.data.list;
                } else {
                    this.$message.warning(res.msg);
                }
            });
        },
        // 获取行的id
        getRowKeys(row) {
            return row.id;
        },
        // 展开树
        changeExpand(e) {
            if (e) {
                let rows = [];
                this.tableData.forEach((ele) => {
                    if (ele.children) rows.push(ele.id + "");
                });
                this.expandRows = rows;
            } else {
                this.expandRows = [];
            }
        },

        // 开放城市
        confirmOpen() {
            if (this.ruleForm.city_id == "") {
                this.$message.error("请选择要开放的城市");
                return false;
            }
            this.$confirm("确认开放此城市?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(() => {
                    openCityApi(this.ruleForm).then((res) => {
                        if (res.code == 200) {
                            this.$message.success(res.msg);
                            this.getTableList();
                        } else {
                            this.$message.warning(res.msg);
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消",
                    });
                });
        },

        // 删除节点
        closeCity(data) {
            let query = data;
            this.$confirm("是否删除地区?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(() => {
                    closeCityApi(query).then((res) => {
                        if (res.code == 200) {
                            this.$message.success(res.msg);
                            this.getTableList();
                        } else {
                            this.$message.error(res.msg);
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "error",
                        message: "已取消删除",
                    });
                });
        },
        showEditRegin(row) {
            if (!this.$refs["editRegionView"]) {
                this.$nextTick(function () {
                    this.$refs["editRegionView"].showSaveView(row);
                });
            } else {
                this.$refs["editRegionView"].showSaveView(row);
            }
        },
    },
};
</script>
